<template>
  <div id="followList">
    <div class="item" v-for="(item,index) in list" :key="index">
      
      
      <div class="top">
        <div class="img-box">
          <img class="author-img" src="../../../assets/img/author.jpg" />
        </div>
        <div class="author-name">
          {{item.author}}---{{page}}
        </div>
        <div class="share">分享</div>
      </div>
      
      <!--  -->
      <div class="title">
        {{item.title}}
      </div>
      <!-- 视频 -->
      <div class="videeos">
        <div class="videos-box">
          <videos :videos="item"></videos>
        </div>
      </div>
      <!--  -->
      <div class="box">
        <div class="left">
          3-{{item.id}}
        </div>
        <div class="right">
          <div class="box-n iconfont">&#xe72f;{{item.sharNumber}}</div>
          <div class="box-n iconfont">&#xe61c;{{item.commentNumber}}</div>
          <div class="box-n iconfont">&#xe613;{{item.loveNumber}}</div>
        </div>
      </div>
      
      <!--  -->
      <div class="comment-text">
        <input class="comment-input" type="text" placeholder="#留下你的评论吧#"/>
      </div>
      
    </div>
    
    <div class="h-5"></div>
  </div>
</template>

<script>
import axios from 'axios'
import videos from '../../first/components/video.vue'
export default {
  name: 'followList',
  components:{
    videos
  },
  data(){
    return{
      list:[],
      page:this.$route.query.page //接受路由传参
    }
  },
  created() {
    this.getVideo()
  },
  methods:{
    getVideo(){
      axios.get('api/videos.json')
      .then(this.getVideoSucc)
    },
    getVideoSucc(res){
      console.log(res);
      if(this.page === "好友"){
        this.list = res.data.list.slice(0,15)
      }else{
        this.list = res.data.list.slice(15,29)
      }
    }
  }

}
</script>

<style  scoped>
  .h-5{
    height: 1rem;
  }
#followList{
  position: absolute;
  top: 1rem;
  left: 0;
  width: 100%;
  background-color: #000000;
}
#followList .item{
  padding: 0 .5rem;
  
}
#followList .item .top{
  margin-top: 1rem;
  height: 1rem;
  overflow: hidden;
}
#followList .item .top .img-box{
  float: left;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
}
#followList .item .top .img-box .author-img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
#followList .item .top .author-name{
  float: left;
  font-size: .4rem;
  height: 1rem;
  line-height: 1rem;
  margin-left: .1rem;
}
#followList .item .top .share{
  float: right;
  font-size: .3rem;
  margin-right: .2rem;
  height: 1rem;
  line-height: 1rem;
}
#followList .item .title{
  width: 100%;
  font-size: .3rem;
  margin-top: .3rem;
  height: .5rem;
  line-height: .5rem;
}
#followList .item .videeos{
  width: 100%;
  height: 7.5rem;
}
#followList .item .videeos .videos-box{
  width: 85%;
  height: 100%;
}
#followList .item .box{
  overflow: hidden;
  margin-top: .5rem;
  
}
#followList .item .box .left{
  float: left;
  font-size: .3rem;
  height: .5rem;
  line-height: .5rem;
}
#followList .item .box .right{
  float: right;
  overflow: hidden;
}
#followList .item .box .right .box-n{
  float: right;
  font-size: .3rem;
  height: .3rem;
  line-height: .3rem;
  padding-left: .2rem ;
}
#followList .item .comment-text{
  width: 100%;
  margin-top: .3rem;
}
#followList .item .comment-text .comment-input{
  width: 85%;
  height: .7rem;
  background-color: #333333;
}
</style>
